<template>
  <div class="assets_page">
    <!-- 列表展示 tab头部 -->
    <ul class="tab_header">
      <li
        v-for="(item, index) in tabList"
        :key="index"
        @click="changeTab(index)"
      >
        <span :class="{ actived: curHeaderIndex == index }">{{
          item.text
        }}</span>
        <div :class="{ border_bottom: curHeaderIndex == index }"></div>
      </li>
    </ul>
    <!-- 列表展示 tab内容部 -->
    <ul class="tab_content">
      <!-- 资产内容 -->
      <li v-if="curHeaderIndex == 0">
        <!-- 总资产 -->
        <div class="total_assets font_color">
          <span>总资产USD</span>
          <img src="@/assets/login/open_icon.png" alt="" />
        </div>
        <!-- 无资产 -->
        <template v-if="!isAssets">
          <div class="balance">$0 USDT</div>
          <div class="no_balance font_color">
            <img src="@/assets/assets/assets_img.png" alt="" />
            <span>快乐投资，乐享不停！</span>
          </div>
          <!-- 充值按钮 -->
          <div class="operate_btn" @click="goPage('/assets/recharge')">
            充值
          </div>
        </template>
        <!-- 有资产 -->
        <template v-else>
          <div class="balance">{{ allAssets }} USDT</div>
          <div class="about font_color">≈{{ allAssets }}USD</div>
          <!-- 充值按钮 -->
          <div class="opt_btns">
            <div class="recharge" @click="goPage('/assets/recharge')">充值</div>
            <div @click="goPage('/assets/withdraw')">提现</div>
            <div @click="goPage('/assets/transfer')">转账</div>
          </div>
        </template>

        <!-- 账户 -->
        <div class="account">账户</div>
        <!-- 现货账户 -->
        <ul class="spot_account">
          <li>
            <div class="left">
              <img src="@/assets/assets/account_icon.png" alt="" />
              <span>现货账户</span>
            </div>
            <div class="right font_color">
              <span>{{ allAssets }}USDT</span>
              <span>≈{{ allAssets }}USD</span>
            </div>
          </li>
        </ul>
      </li>
      <!-- 现货内容 -->
      <li v-if="curHeaderIndex == 1">
        <!-- 总资产 -->
        <div class="total_assets font_color">
          <span>总资产USD</span>
          <img src="@/assets/login/open_icon.png" alt="" />
        </div>
        <div class="balance">{{ allAssets }} USDT</div>
        <div class="about font_color">≈{{ allAssets }}USD</div>
        <!-- 充值按钮 -->
        <div class="opt_btns">
          <div class="recharge" @click="goPage('/assets/recharge')">充值</div>
          <div @click="goPage('/assets/withdraw')">提现</div>
          <div @click="goPage('/assets/transfer')">转账</div>
        </div>
        <!-- 币种 -->
        <div class="currency">币种</div>
        <!-- 币种列表 -->
        <ul class="currency_list">
          <li
            @click="goPage('/assets/currencyDetails', item)"
            v-for="(item, index) in assetsList"
            :key="index"
          >
            <div class="left">
              <img
                :src="`https://qhzx-kline2.oss-ap-southeast-1.aliyuncs.com/logos/${item.coinName}.png`"
                alt=""
              />
            </div>
            <div class="right">
              <div class="first">
                <span>{{ item.coinName }}</span>
                <span>{{ item.usableBalance }}</span>
              </div>
              <div class="second font_color">
                <span>{{ item.coinAllName || item.coinName }}</span>
                <span>{{ item.usdtAmt || 0 }}</span>
              </div>
              <div class="third font_color">
                <span>今日盈亏</span>
                <span :class="item.todayPL >= 0 ? 'add_number' : 'cut_number'"
                  >{{ item.todayPL || 0 }} USDT</span
                >
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
// import BTCIcon from "@/assets/assets/BTC_icon.png";
// import USDTIcon from "@/assets/assets/USDT_icon.png";
// import BCHIcon from "@/assets/assets/BCH_icon.png";
import { useRouter } from "vue-router";
import { getAssets } from "@/api/assets";

// 获取路由对象
const router = useRouter();
// 当前高亮tab头部栏
const curHeaderIndex = ref(0);
// 是否有资产
const isAssets: any = ref(false);
// 总资产
const allAssets = ref();

// tab头部栏列表
const tabList = ref([{ text: "总览" }, { text: "现货" }]);
// 币种列表
const assetsList = ref();

// 切换tab头部栏
const changeTab = (index: number) => {
  curHeaderIndex.value = index;
};

// 跳转指定页
const goPage = (path: string, row?: any) => {
  if (path == "/assets/transfer" || path == "/assets/withdraw") {
    router.push({
      path,
      query: {
        data: allAssets.value
      },
    });
  } else {
    sessionStorage.setItem("row",JSON.stringify(row))
    router.push(path)
  }
};

// 获取数据
const getData = () => {
  getAssets().then((res: any) => {
    allAssets.value = res.data.all;
    assetsList.value = res.data.spotList;
    isAssets.value = allAssets.value ? true : false
  });
};

// 数据初始化
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.assets_page {
  padding: 0px 15px;
  margin-bottom: 75px;
  .tab_header {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    color: #babcbf;
    li {
      position: relative;
      margin-right: 20px;
      .actived {
        color: #ffffff;
      }
      .border_bottom {
        position: absolute;
        top: 35px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 3px;
        background: linear-gradient(to right, #14da62, #0d5eae);
      }
    }
  }
  .tab_content {
    li {
      .total_assets {
        padding-top: 20px;
        margin: 20px 0;
        span {
          margin-right: 10px;
        }
      }
      .balance {
        font-size: 20px;
      }
      .no_balance {
        text-align: center;
        span {
          display: flex;
          justify-content: center;
          font-size: 14px;
        }
      }
      .about {
        margin-top: 20px;
      }
      .opt_btns {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        div {
          width: 30vw;
          text-align: center;
          padding: 10px 0;
          border-radius: 10px;
          background-color: #2c2d2d;
        }
        .recharge {
          background: linear-gradient(to right, #14da62, #0d5eae);
        }
      }
      .operate_btn {
        margin-bottom: 10px;
      }
      .account {
        margin: 20px 0;
        margin-bottom: 10px;
      }
      .spot_account {
        li {
          display: flex;
          padding: 10px 0;
          justify-content: space-between;
          align-items: center;
          .left {
            display: flex;

            span {
              margin-left: 10px;
            }
          }
          .right {
            display: flex;
            flex-direction: column;
            font-size: 14px;
          }
        }
      }
      .currency {
        margin: 20px 0;
      }
      .currency_list {
        li {
          display: flex;
          margin-bottom: 20px;
          .left {
            margin-right: 10px;
            width: 30px;
            height: 30px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            flex: 1;
            div {
              display: flex;
              justify-content: space-between;
            }
            .second,
            .third {
              font-size: 14px;
            }
            .second {
              margin-bottom: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
